<template>
  <div>
    <!-- <v-app-bar app color="primary" dark>
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="../assets/logo.png"
          transition="scale-transition"
          width="40"
        />



        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src=""
          transition="scale-transition"
          width="200"
        />
      </div>


      <v-btn class="mx-2" route to="/cesium">Cesium {{ dep.cesium }}</v-btn>

  




    </v-app-bar> -->
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { mapState, mapMutations } from "vuex";
import router from "@/router/router";

// We declare the props separately to make props types inferable.
const AppProps = Vue.extend({
  props: {},
});

@Component({
  components: {},
  // Vuex's component binding helper can use here
  computed: mapState(["count"]),
  methods: mapMutations(["increment"]),
  template: '<button @click="onClick">Click!</button>',
})
export default class AppBar extends AppProps {
  // inital data
  msg: number = 123;
  dynamicProp: string = "Dynamic";
  routerProp: string = "prop";

  dep = {
    compositionAPI: "1.0.0-rc.13",
    axios: "0.21.1",
    cesium: "1.83.0",
    vue: "2.6.14",
    "vue-class-component": "7.2.6",
    "vue-property-decorator": "9.1.2",
    "vue-router": "3.5.1",
    "vue-shortkey": "3.1.7",
    vuetify: "2.5.6",
    vuex: "3.6.2",
    typescript: "4.3.5",
  };

  routerActions() {
    //https://router.vuejs.org/guide/essentials/navigation.html
    //https://router.vuejs.org/guide/essentials/passing-props.html
    let rPar = this.msg;
    // literal string path
    //router.push('home')

    // object
    //router.push({ path: 'home' })

    const propConst = "const456";
    let propLet = "let123";
    // routes do string only
    //let compData: string = "Stringified" + this.msg
    let compData: string = this.dynamicProp;

    // named route
    // Warning: double navigation to the same dynamic props might cause errors
    // TODO: check if route is already active before pushing it
    //router.push({ name: 'ClassStyleHome', params: { routerProp: '', routerProp2: "456" } })
    //router.push({ name: 'ClassStyleHome', params: { routerProp: '123', routerProp2: propConst } })
    //router.push({ name: 'ClassStyleHome', params: { routerProp: propLet, routerProp2: propConst } })
    router.push({
      name: "ClassStyleHome",
      params: { routerProp: compData, routerProp2: propConst },
    });

    // with query, resulting in /register?plan=private
    //router.push({ path: 'register', query: { plan: 'private' } })

    //router.push("classStyle") // -> /user/123
    console.log("Called for router" + this.msg);
  }
}
</script>
